<template>
	<view class="loginWrap">
		<view class="imageWrap">
			<image class="img" :src="iconUrl+AdministrationImage.companyLogo"></image>
		</view>
		<view class="title">{{AdministrationImage.companyTitle}}</view>
		<view class="name">为您提供便捷的服务</view>
		<view class="nameBot">让您省时、省心、省力</view>
		<u-button customStyle="margin-top:40px;font-size:18px;" 
		:loading="IfImplementEvent" v-if="JSON.stringify(userInfo)=='{}'"
		  size="large" color="#0AB99C" text="登录/注册" @click="getUserInfoLogin">
		</u-button>
		<u-button customStyle="margin-top:40px;font-size:18px;" 
		  :loading="IfImplementEvent" v-if="JSON.stringify(userInfo)!='{}'&&!userInfo.phone"
		  openType="getPhoneNumber"
		  size="large" color="#0AB99C" text="绑定手机号" @getphonenumber="decryptPhoneNumber">
		</u-button>
	</view>
</template>

<script>
	import {AdministrationImage} from '@/utils/common.js'
	import {mapState,mapMutations} from 'vuex'
	import { getOpenIdPost,getTokenPost,getUserProfileGet } from '@/config/api.js'
	import implementStateButton from "@/mixins/implementStateButton.js"
	export default{
		name:'my-login',
		mixins:[implementStateButton],
		props:{
			IfNavigateBack:{
				type:Boolean,
				default:true,
			}
		},
		data(){
			return{
				iconUrl:getApp().globalData.iconUrl,
				AdministrationImage:AdministrationImage,
				loginLoading:false,
				phoneLoading:false,
			}
		},
		computed:{
			...mapState('m_user',['userInfo'])
		},
		methods:{
			// 把m_user模块中的updateUserInfo,updateToken函数映射到当前组件中使用
			...mapMutations('m_user',['updateToken','updateUserInfo']),
			//登录
			getUserInfoLogin(){
				this.IfImplementMethods()
				let obj={
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					gender: 0,
				}
				let that=this
				uni.login({
					success(resCode) {
						that.getOpenid(obj,resCode.code)
					}
				})
				
			},
			async getOpenid(obj,code){//获取we用户openid
				//获取code用来换取openid
				let param={
					code:code,
					type:'login'
				}
				let res=await getOpenIdPost(param)
				if(res.code=='0'){
					obj.openid=res.data
					this.getMyLoginData(obj)
				}
			},
			async getMyLoginData(obj){//获取用户token并登录
				let tokenRes=await getTokenPost(obj)
				if(tokenRes.code=='0'){
					// 获取登录成功之后的Token字符串
					this.updateToken(tokenRes.token)
					// 将用户基本信息存储到vuex中
					this.getSignUserInfo()
				}
			},
			setUserInfoObj(userRes,type='有值'){
				this.updateUserInfo({
					avatar:userRes.avatar,
					userName:userRes.nickname,
					userId:userRes.id,
					parkId:1,
					sex:userRes.gender,
					customerType:userRes.customerType?userRes.customerType:'会员',//用户类型
					phone:type?userRes.mobile:'',
					customerId:userRes.customerId?userRes.customerId:''
				})
			},
			async getSignUserInfo(){//获取登录用户信息并保存到本地
			    let that=this
				let userRes=await getUserProfileGet()
				if(userRes.code=='0'){
					getApp().globalData.ifImplementonShow=true
					if(userRes.data.mobile.length!=8){//手机号有值时表示该用户已绑定手机号
						uni.$u.toast('登录成功！','success',function(){
							uni.navigateBack({
								delta:1,
							})
						},1500)
						that.setUserInfoObj(userRes.data)
					}else{//要绑定手机号
						that.setUserInfoObj(userRes.data,'')
						uni.$u.toast('登录成功！','success')
					}
				}
				this.IfImplementEvent=false
			},
			decryptPhoneNumber(e){
				// this.phoneLoading=true
				if(e.detail.errMsg == "getPhoneNumber:ok"){
					this.getUserPhone(e.detail.code)
				}else{
					uni.$showMsg('您已拒接获取手机号！')
				}
			},
			async getUserPhone(code){
				this.IfImplementMethods()
				let param={
					code:code,
					id:this.userInfo.userId
				}
				let res=await getOpenIdPost(param)
				if(res.code=='0'){
					let userRes={
						avatar:this.userInfo.avatar,
						userName:this.userInfo.userName,
						userId:this.userInfo.userId,
						parkId:1,
						sex:this.userInfo.sex,
						customerType:this.userInfo.customerType?this.userInfo.customerType:'会员',//用户类型
						phone:res.phone,
						customerId:this.userInfo.customerId?this.userInfo.customerId:''
					}
					this.updateUserInfo(userRes)
					uni.$u.toast('绑定成功！','success',function(){
						uni.navigateBack({
							delta:1,
						},1500)
					})
				}else{
					uni.$showMsg(res.msg)
				}
				this.IfImplementEvent=false
			}
		},
		watch:{
			
		}
	}
</script>

<style scoped lang="scss">
	page{
		background:#fff;
	}
	.loginWrap{
		position: fixed;
		left:50%;
		top:20%;
		transform: translateX(-50%);
		width:650rpx;
		.imageWrap{
			width:50px;
			height:50px;
			border-radius:50%;
			overflow: hidden;
			margin:0 auto;
			.img{
				height:100%;
				width:100%;
			}
		}
		// 标题
		.title{
			font-weight: 800;
			text-align: center;
			margin-bottom:25px;
		}
		.name,.nameBot{
			text-align: center;
			font-size:28rpx;
		}
		.nameBot{
			color:#cdcdcd;
			margin-top:8px;
		}
		.LoginBut{
			width:100%;
			height:50px;
			background:#d8234b;
			text-align: center;
			line-height: 50px;
			color:#fff;
			margin-top:40px;
			border-radius:30px;
		}
	}
</style>